<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="员工姓名:">
                <a-input v-model="pagination.name" placeholder="请输入员工姓名"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <div class="staff-box">
      <!-- height: 750px; -->
      <a-card :bordered="false" style="width: 90%;">
        <a-row :gutter="8">
          <div class="tree-container">
            <div class="left">
              <div class="filter-container">
                <a-button type="primary" @click="orgAdd(1)" icon="plus" v-checkBtn="'org:unit:add'">
                  新增单位
                </a-button>
              </div>
              <a-col :span="6">
                <a-spin :spinning="treeOnLoad" style="width: 280px;">
                  <div class="tree-box">
                    <a-button type="primary" size="small" @click="allTable">全部</a-button>
                    <a-tree
                      v-if="!treeOnLoad"
                      :tree-data="treeData"
                      draggable
                      blockNode
                      v-model="treeData"
                      :defaultExpandAll="true"
                      :replaceFields="replaceFields"
                      :autoExpandParent="true"
                      :defaultExpandedKeys="treeData"
                      @select="onSelect"
                      class="aTree">
                      <template v-slot:title="nodeData">
                        <div
                          @mouseenter="mouseenterDict(nodeData)"
                          @mouseleave="mouseleaveDict(nodeData)"
                          class="treeItem">
                          <div
                            style="width: 130px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;-webkit-line-clamp:1;">
                            {{ nodeData.organizationUnitName }}</div>
                          <a-button-group v-show="mouseenterId == nodeData.organizationUnitId" class="treeGroup">
                            <a-button
                              size="small"
                              @click="orgAdd(nodeData)"
                              icon="plus-circle"
                              title="添加"
                              v-checkBtn="'org:unit:add'"></a-button>
                            <a-button
                              size="small"
                              @click="orgEdit(nodeData)"
                              icon="form"
                              title="修改"
                              v-checkBtn="'org:unit:edit'"></a-button>
                            <a-button
                              size="small"
                              icon="close-circle"
                              title="删除"
                              @click="orgDelete(nodeData)"
                              v-checkBtn="'org:unit:del'"></a-button>
                          </a-button-group>
                        </div>
                      </template>
                    </a-tree>
                  </div>

                </a-spin>
              </a-col>
            </div>
            <div class="right">
              <a-col :span="17" style="width: 96%;">
                <div class="worker">
                  <a-button type="primary" icon="plus" @click="onAdd" v-checkBtn="'staff:add'">
                    新增员工
                  </a-button>
                </div>
                <a-table
                  class="vTable"
                  :columns="columns"
                  :data-source="dataSource"
                  bordered
                  :loading="loading"
                  :rowKey="(record, index) => { return index }"
                  :scroll="{ x: true, y: 500 }"
                  :pagination="pagination">
                  <template slot="existAccount" slot-scope="text,record">
                    <!-- <span>
                                            {{ record.existAccount ? '是' : '否' }}
                                        </span> -->
                    <span v-if="record.existAccount"><a-tag color="green">存在</a-tag></span>
                    <span v-else><a-tag color="red">不存在</a-tag></span>
                  </template>
                  <template slot="accountStatus" slot-scope="text,record">
                    <span>
                      <a-tag color="blue" v-if="record.accountStatus == 1">正常</a-tag>
                      <a-tag color="#ff9900" v-else-if="record.accountStatus == 2">冻结</a-tag>
                    </span>
                  </template>
                  <span slot="action" slot-scope="text, record">
                    <div v-show="record.existAccount != false">
                      <a href="javascript:;" @click="onEdit(record)" v-checkBtn="'staff:edit'">编辑</a>
                      <a-divider type="vertical" />
                      <a href="javascript:;" @click="onReset(record)" v-checkBtn="'reset:staff:pwd'">重置密码</a>
                    </div>
                    <div :class="record.existAccount ? 'fl' : 'noAccount'">
                      <a
                        href="javascript:;"
                        v-show="record.existAccount != false"
                        @click="onPower(record)"
                        v-checkBtn="'staff:role:edit'">权限角色</a>
                      <a
                        href="javascript:;"
                        v-show="record.existAccount != true"
                        @click="onOpen(record)"
                        v-checkBtn="'open:account'">开通账号</a>
                    </div>

                  </span>
                </a-table>
              </a-col>
            </div>
          </div>
        </a-row>

        <powerModal v-if="dialog.powerSave" ref="powerSaveModal" @close="Cancel"></powerModal>
        <pwdSaveModal ref="pwdSaveModal" v-if="dialog.pwdSave" @close="Cancel"></pwdSaveModal>
        <openModal ref="openModal" v-if="dialog.openSave" @success="apiAll" @close="Cancel">
        </openModal>
        <orgSaveModal v-if="dialog.orgSave" ref="orgSaveModal" @success="apiAll" @close="Cancel">
        </orgSaveModal>
        <saveModal ref="saveModal" v-if="dialog.save" @success="apiAll" @close="Cancel">
        </saveModal>

      </a-card>
    </div>
    <a-back-top/>
  </div>
</template>

<script>
// 接口导入
import { getOrg, deleteOrg } from '@/api/org'
import { orgEmployees } from '@/api/staff'
// 密码、部门、开通、权限组件导入
import pwdSaveModal from './pwdSave'
import orgSaveModal from './orgSave'
import saveModal from './save'
import openModal from './openSave'
import powerModal from './powerSave'
// 弹窗提示  用于删除
import { Modal } from 'ant-design-vue'
export default {
  components: {
    pwdSaveModal,
    orgSaveModal,
    saveModal,
    openModal,
    powerModal
  },
  data () {
    return {
      // 单位
      replaceFields: {
        children: 'children',
        title: 'organizationUnitName',
        key: 'organizationUnitId',
        value: 'organizationUnitId'
      },
      // 树状图加载
      treeOnLoad: true,
      treeData: [],
      // 权限树是否显示操作图标
      mouseenterId: '',
      // 组件的删除与创建
      dialog: {
        save: false,
        orgSave: false,
        pwdSave: false,
        openSave: false,
        powerSave: false
      },
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          width: 150
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          key: 'phoneNumber',
          align: 'center',
          width: 120
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          key: 'email',
          align: 'center',
          width: 180
        },
        {
          title: '是否存在平台账号',
          dataIndex: 'existAccount',
          key: 'existAccount',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'existAccount' }
        },
        {
          title: '平台账号状态',
          dataIndex: 'accountStatus',
          key: 'accountStatus',
          width: 140,
          align: 'center',
          scopedSlots: { customRender: 'accountStatus' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      // 单位id
      orgId: '1',
      // 表格是否加载
      loading: false,
      pagination: {
        // 分页配置
        pageSize: 10, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        name: '',
        organizationId: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      }
    }
  },
  created () {
    this.apiAll()
  },
  mounted () {

  },
  methods: {

    // 搜索
    onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 10
      this.orgId = ''
      this.pagination.organizationId = ''
      this.getEmployees()
    },
    // 重置搜索
    searchReset () {
      this.allTable()
    },
    // 全部
    allTable () {
      this.orgId = ''
      this.pagination = {
        // 分页配置
        pageSize: 10, // 每页显示的条数
        current: 1, // 当前页数
        total: 10, // 总条数
        name: '',
        organizationId: ''
      }
      const par = {
        ...this.pagination
      }
      this.loading = true
      orgEmployees(par).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data.datas
          this.loading = false
        }
      })
    },
    apiAll () {
      this.GetTree()
      this.getEmployees()
      this.Cancel()
    },
    Cancel () {
      this.dialog = {
        save: false,
        orgSave: false,
        pwdSave: false,
        openSave: false,
        powerSave: false
      }
    },
    handlePageChange (page, pageSize) {
      this.pagination.current = page
      this.getEmployees()
    },
    // 左侧鼠标悬浮展示图标
    mouseenterDict (data) {
      this.mouseenterId = data.organizationUnitId
    },
    // 左侧鼠标离开不展示图标
    mouseleaveDict () {
      this.mouseenterId = ''
    },
    // 单位树
    GetTree () {
      getOrg().then(res => {
        if (res.code == 200) {
          // if (res.data.length > 0) {
          //     _this.orgId = res.data[0].organizationUnitId
          //     _this.getEmployees(_this.orgId)
          // }
          this.treeData = res.data
          this.treeOnLoad = false
          this.dialog.save = false
        }
      })
    },
    // 节点点击
    onSelect (e) {
      if (e.length == 0) return
      this.orgId = Number(e.join(''))
      this.pagination.organizationId = Number(e.join(''))
      this.getEmployees()
    },
    // 获取员工
    getEmployees () {
      this.loading = true
      const { pageSize, current, name, organizationId } = this.pagination
      const par = {
        pageSize, current, name, organizationId
      }
      orgEmployees(par).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data.datas
          this.pagination.total = res.data.total
          this.loading = false
        }
      })
    },
    // 添加员工
    onAdd () {
      this.dialog.save = true
      // let par = {
      //     organizationUnitId: this.orgId
      // }
      this.$nextTick(() => {
        this.$refs.saveModal.open('add')
      })
    },
    // 开通
    onOpen (row) {
      this.dialog.openSave = true
      this.$nextTick(() => {
        this.$refs.openModal.open(row)
      })
    },
    // 编辑员工
    onEdit (nodeData) {
      this.dialog.save = true
      // let par = {
      //     ...nodeData,
      //     organizationUnitId: this.orgId
      // }
      this.$nextTick(() => {
        this.$refs.saveModal.open('edit').setData(nodeData)
      })
    },
    // 角色权限
    onPower (row) {
      this.dialog.powerSave = true
      this.$nextTick(() => {
        this.$refs.powerSaveModal.open(row)
      })
    },
    // 重置密码
    onReset (row) {
      this.dialog.pwdSave = true
      this.$nextTick(() => {
        this.$refs.pwdSaveModal.open(row)
      })
    },
    // 新增部门
    orgAdd (nodeData) {
      this.dialog.orgSave = true
      this.$nextTick(() => {
        this.$refs.orgSaveModal.open().setData(nodeData)
      })
    },
    // 编辑部门
    orgEdit (nodeData) {
      this.dialog.orgSave = true
      this.$nextTick(() => {
        this.$refs.orgSaveModal.open('edit').setData(nodeData)
      })
    },
    // 删除部门
    orgDelete (nodeData) {
      const _this = this
      Modal.confirm({
        title: '删除信息',
        content: '确定要删除吗？',
        onOk: () => {
          deleteOrg(nodeData.organizationUnitId).then(res => {
            if (res.code == 200) {
              _this.GetTree()
              _this.$message.success('删除成功')
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.tree-box {
  margin-top: 20px;
}

.vTable {
  //     height: 660px;
  //   overflow-y: auto;
  //   overflow-x: hidden;
}

.aTree {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 600px;
  width: 280px;
}

.fl {
  display: flex;
  justify-content: flex-start;
  padding-left: 8px;
  // padding-left: 22px;
}

.noAccount {
  display: flex;
  justify-content: flex-start;
  // padding-left: 22px;
  padding-left: 8px;
}

.staff-box {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  border-radius: 2px;
}

.tree-container {
  display: flex;
  flex-direction: row;

  .right {

    width: 100%;
    display: flex;
  }
}

.filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.worker {
  padding-bottom: 10px;
}

.treeItem {
  display: flex;
  justify-content: space-between;
}

.treeGroup {
  margin-top: -2px;
  margin-right: -6px;
}
</style>
